<template>
    <div>
        <el-card class="my-20px">
            <filterComponent v-model:filter-data="filterData" @doSearch="handleSearch" />
        </el-card>
        <el-card>
            <statisticsComponent ref="statisticsRef" :insure-type="insureType" :query-data="query" />
        </el-card>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { throttle, debounce } from 'lodash'
import statisticsComponent from './components/statisticsComponent.vue'
import { getdepartmentapi } from '@/api/api.ts'
import { getDealList, getDeptList, getSalesmanList, getProductList } from '@/api/clients/signClient.ts'

const props = defineProps({
    insureType: {
        type: String,
        default: 'dashboardDay'
    }
})

const filterData = ref({
    list: {
        deptId: {
            name: '所属分组',
            prop: 'deptId',
            value: '',
            placeholder: '请选择所属分组',
            type: 'selectDept',
            options: [],
            defaultAttrs: {
                label: 'deptName',
                value: 'deptId'
            },
            handleFocus: (item) => {
                // if (item.options?.length) return
                // getDeptList({
                //     type: 1
                // }).then(res => {
                //     item.options = res
                // })
            },
            handleChange: (item) => {
                filterData.value.list.salesId.value = ''
                filterData.value.list.salesId.options = []
            }
        },
        salesId: {
            name: '成员',
            clearOption: true,
            prop: 'saleId',
            value: '',
            placeholder: '请选择成员',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'saleName',
                value: 'saleId'
            },
            handleFocus: (item) => {
                const value = filterData.value.list.deptId.value
                if (!value) {
                    ElMessage.warning({
                        message: '请先选择所属部门'
                    })
                    return
                }
                if (item.options?.length) return
                getSalesmanList({
                    auditStatus: 1,
                    deptId: value
                }).then(res => {
                    item.options = res
                })
            }
        },
    },
    buttonList: [
    ]
})



const statisticsRef = ref(null)


const query = ref({})

const createQuery = () => {
    const query = {}
    for (const key in filterData.value.list) {
        query[filterData.value.list[key].prop] = filterData.value.list[key].value
    }
    return query
}

const handleSearch = () => {
    query.value = createQuery()
    setTimeout(() => {
        statisticsRef.value.getData()
        statisticsRef.value.getData1()
        //     statisticsRef.value.getOperationData()
        //     statisticsRef.value.refreshData()
    }, 0)
}
// throttle(() => {
//     window.addEventListener('resize', () => {
//         statisticsRef.value.resize()
//     }, false)
// }, 1000)


</script>
<style lang="scss" scoped></style>